<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="name"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="sex">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addFn">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
        v-show="this.list.length !== 0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" :key="item.id">
          <td> {{ index + 1 }} </td>
          <td> {{ item.name }} </td>
          <td> {{ item.age }} </td>
          <td> {{ item.sex }} </td>
          <td>
            <button @click.prevent="del(item.id)">删除</button>
            <button @click.prevent="redact(item.id)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
    data() {
      return {

        name: "请输入您的姓名",
        age: 10,
        sex: "男",
        flag: "",

        list:[
        {
          id: 11,
          name: "小明",
          age: 18,
          sex: "男"
        },
        {
          id: 12,
          name: "小红",
          age: 17,
          sex: "女"
        },
        {
          id: 13,
          name: "小亮",
          age: 19,
          sex: "男"
        },
      ] 
      }
    },
    methods: {
      addFn(){
        
        if(this.flag === ""){
            if(this.name == "请输入您的姓名" || this.name.length <= 0) return alert("输入有效信息")

            this.list.push({
              id: +new Date(),
              name: this.name,
              age: this.age,
              sex: this.sex
          }) 
        } else {
            this.flag.name = this.name
            this.flag.age = this.age
            this.flag.sex = this.sex

        }
        this.name = ""
        this.age = ""
        this.sex = "男"
        this.flag = ""
      },
      del(id){
          this.list = this.list.filter(item => item.id !== id)
      },
      redact(id){
        let obj = this.list.find(item => item.id === id);

        this.name = obj.name
        this.age = obj.age
        this.sex = obj.sex
        this.flag = obj
      }
    }
}
</script>
